<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/WEB-INF/admin/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">

    <ui:define name="title">Empty Page</ui:define>

    <ui:define name="head">
        <h:outputStylesheet>
            .ui-password-masked input {
                width: 100%;
            }

            .layout-content .layout-dashboard .profile .ui-panel-content .profile-info .profile-numbers {
                margin: 0 15px !important;
            }
        </h:outputStylesheet>
    </ui:define>

    <ui:define name="viewname">
        <li>global</li>
        <li>/</li>
        <li>personal</li>
    </ui:define>

    <ui:define name="content">
        <h:form id="personal_form" prependId="false">
            <div class="layout-dashboard">
                <div class="ui-g-12 ui-md-4 ">
                    <p:panel styleClass="profile">
                        <div class="bg-image"></div>
                        <div class="profile-info">
                            <p:commandLink
                                    action="#{controller.initCropUploader}"
                                    oncomplete="PF('cropper_dialog').show()"
                                    styleClass="p-d-block p-mb-3"
                                    process="@this"
                                    update="@widgetVar(cropper_dialog)">
                                <p:avatar rendered="#{empty viewScope.user.avatarUrl}"
                                          label="#{fn:toUpperCase(viewScope.user.nickname)}"
                                          styleClass="profile-image "/>
                                <p:avatar rendered="#{not empty viewScope.user.avatarUrl}"
                                          styleClass="profile-image ">
                                    <p:graphicImage url="#{viewScope.user.avatarUrl}"/>
                                </p:avatar>
                            </p:commandLink>

                            <p:outputPanel styleClass="name p-mb-2">
                                <i class="fa fa-user"/>
                                <h:outputText
                                        value="#{empty viewScope.user.nickname ? msg['blog']['notFill'] : viewScope.user.nickname}"/>
                            </p:outputPanel>
                            <p:outputPanel styleClass="job p-mb-2">
                                <i class="fa fa-envelope"/>
                                <h:outputText
                                        value="#{empty viewScope.user.email ? msg['blog']['notFill'] : viewScope.user.email}"/>
                            </p:outputPanel>
                            <p:outputPanel styleClass="location p-mb-2">
                                <i class="fa fa-home"/>
                                <h:outputText
                                        value="#{empty viewScope.user.remark ? msg['blog']['notFill'] : viewScope.user.remark}"/>
                            </p:outputPanel>
                            <div>
                                <div class="profile-numbers">
                                    <span class="header">文章</span>
                                    <span class="number">381</span>
                                </div>
                                <div class="profile-numbers">
                                    <span class="header">评论</span>
                                    <span class="number">492</span>
                                </div>
                                <div class="profile-numbers">
                                    <span class="header">点赞</span>
                                    <span class="number">1,395</span>
                                </div>
                            </div>
                        </div>
                        <p:divider align="left" type="dashed">
                            <b>#{msg['blog']['password']}</b>
                        </p:divider>


                    </p:panel>
                </div>
                <div class="ui-g-12 ui-md-8">
                    <p:card>
                        <p:tabView>
                            <p:tab title="#{msg['blog']['baseInfo']}">
                                <p:outputPanel styleClass="p-grid">
                                    <framework:label value="#{msg['blog']['nickname']}"
                                                     styleClass="p-col-6 ui-g-12 ui-md-6">
                                        <p:inputText value="#{viewScope.user.nickname}"/>
                                    </framework:label>
                                    <framework:label value="#{msg['blog']['email']}" styleClass="ui-g-12 ui-md-6">
                                        <p:inputText value="#{viewScope.user.email}"/>
                                    </framework:label>
                                    <framework:label value="#{msg['blog']['phone']}" styleClass="ui-g-12 ui-md-6">
                                        <p:inputText value="#{viewScope.user.phone}"/>
                                    </framework:label>
                                    <framework:label value="#{msg['blog']['gender']}" styleClass="ui-g-12 ui-md-6">
                                        <p:selectOneRadio value="#{viewScope.user.gender}">
                                            <f:selectItems value="#{viewScope.genders}" var="gender"
                                                           itemValue="#{gender}" itemLabel="#{gender.title}"/>
                                        </p:selectOneRadio>
                                    </framework:label>

                                    <framework:label value="#{msg['blog']['remark']}" styleClass="ui-g-12">
                                        <p:inputTextarea value="#{viewScope.user.remark}" rows="5"/>
                                    </framework:label>
                                </p:outputPanel>
                            </p:tab>
                            <p:tab title="#{msg['framework']['resetPassword']}">
                                <p:outputPanel styleClass="ui-fluid p-formgrid p-grid">
                                    <framework:label value="#{msg['framework']['inputPassword']}">
                                        <p:password id="password1" match="@widgetVar(password2)" feedback="true"
                                                    autocomplete="new-password"
                                                    promptLabel="#{msg['framework']['promptPassword']}"
                                                    weakLabel="#{msg['framework']['weakPassword']}"
                                                    goodLabel="#{msg['framework']['goodPassword']}"
                                                    strongLabel="#{msg['framework']['strongPassword']}"
                                                    validatorMessage="#{msg['framework']['diffPassword']}"
                                                    value="#{viewScope.user.password}"/>
                                    </framework:label>

                                    <framework:label value="#{msg['framework']['confirmPassword']}">
                                        <p:password id="password2" widgetVar="password2" autocomplete="new-password"
                                                    value="#{viewScope.user.password}"/>
                                    </framework:label>

                                    <p:outputPanel layout="inline">
                                        <h:outputText value="最近一次密码更新在 "/>
                                        <h:outputText value="#{viewScope.user.pwdRestTime}">
                                            <f:convertDateTime type="localDateTime"
                                                               pattern="#{msg['format']['localDateTime']}"/>
                                        </h:outputText>
                                    </p:outputPanel>
                                </p:outputPanel>
                            </p:tab>
                            <p:tab title="Header III">
                                <p class="p-m-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
                                    et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
                                    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                                </p>
                            </p:tab>
                        </p:tabView>
                    </p:card>
                </div>
            </div>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="dialogForm">
            <framework:dialog id="cropper" saveDisabled="false" saveUpdate="personal_form,@(.principal-info)"
                              height="500" header="#{msg['framework']['upload']}"
                              saveMethod="#{controller.handleUpdateAvatar}">
                <p:outputPanel styleClass="p-field p-col-12">
                    <p:outputPanel layout="block">
                        <p:fileUpload style="width: 700px"
                                      multiple="false" mode="advanced"
                                      sizeLimit="102400" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                      label="#{msg['framework']['pleaseChoose']}"
                                      chooseIcon="ui-icon-plusthick"
                                      cancelLabel="#{msg['framework']['cancel']}"
                                      cancelIcon="ui-icon-cancel"
                                      uploadLabel="#{msg['framework']['upload']}"
                                      uploadIcon="ui-icon-arrowreturnthick-1-n"
                                      invalidSizeMessage="#{msg['framework']['invalidFileSize']}"
                                      invalidFileMessage="#{msg['framework']['invalidFileType']}"
                                      update="cropper_panel"
                                      listener="#{controller.handleFileUpload}">
                        </p:fileUpload>
                    </p:outputPanel>

                    <p:outputPanel id="cropper_panel" styleClass="p-grid p-mt-2" style="height: 300px">
                        <p:outputPanel styleClass="p-col-5 p-d-flex p-ai-center p-jc-center">
                            <p:outputPanel rendered="#{sessionScope.cropUploader.exist}">
                                <p:imageCropper
                                        value="#{sessionScope.cropUploader.croppedImage}"
                                        id="image_cropper" cache="false"
                                        aspectRatio="1"
                                        image="#{sessionScope.cropUploader.image}"
                                        boxWidth="300" boxHeight="300"
                                />
                                <p:outputPanel class="ui-button-group">
                                    <p:commandButton value="#{msg['blog']['crop']}" style="width: 50%"
                                                     update="cropped"/>

                                    <p:commandButton value="#{msg['framework']['cancel']}" style="width: 50%"
                                                     action="#{controller.initCropUploader}"
                                                     update="cropper_panel"/>
                                </p:outputPanel>
                            </p:outputPanel>
                        </p:outputPanel>

                        <div class="p-col-2">
                            <p:divider layout="vertical">
                                <b>#{msg['blog']['preview']}</b>
                            </p:divider>
                        </div>
                        <p:outputPanel id="cropped" styleClass="p-col-5 p-d-flex p-ai-center p-jc-center">
                            <p:outputPanel layout="block">
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          styleClass="xxlarge p-m-2">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          size="xlarge" styleClass="p-m-2">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          size="large" styleClass="p-m-2">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                            </p:outputPanel>

                            <p:outputPanel layout="block">
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          styleClass="xxlarge p-m-2" shape="circle">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          size="xlarge" shape="circle" styleClass="p-m-2">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                                <p:avatar rendered="#{not empty sessionScope.cropUploader.croppedImage}"
                                          size="large" shape="circle" styleClass="p-m-2">
                                    <p:graphicImage cache="false" value="#{sessionScope.cropUploader.cropped}"/>
                                </p:avatar>
                            </p:outputPanel>
                        </p:outputPanel>
                    </p:outputPanel>
                </p:outputPanel>
            </framework:dialog>
        </h:form>
    </ui:define>
</ui:composition>